<template>
	<view>
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<view class="back iconfont icon-xiangzuo1" @tap="backPage"></view>
			<view class="text" :class="scrrol == true ? 'scrrolHeader' : ''">訂單詳情</view>
			<view class="back"></view>
			<!-- <view class="rule">规则</view> -->
		</view>
		<view class="clear_box"></view>

		<view class="page_content">
			<view class="content">
				<view class="state_box">
					<view class="text_box">
						<view class="title">待收貨</view>
						<view class="text"> 请耐心等待</view>
					</view>
				</view>

				<view class="address">
					<view class="icon icon_d iconfont icon-shouhuodizhi"></view>
					<view class="text_box">
						<view class="name_box">
							<view class="name">发发发</view>
							<view class="phone">15880224576</view>
						</view>
						<view class="text">发个电话电话回访哈哈哈哈</view>
					</view>
				</view>

				<view class="goods_content">
					<view class="goods_box">
						<image class="goods_img" src="../../../static/cp03.png" mode="scaleToFill"></image>
						<view class="text_box">
							<view class="title">福福貼貼慧根手辦盲盒</view>
							<view class="money_box">
								<view class="money">380 YYDZ</view>
								<view class="num">x1</view>
							</view>
						</view>
					</view>
				</view>

				<view class="list_box">
					<view class="list">
						<view class="title">订单信息</view>
						<view class="text"></view>
					</view>
					<view class="list">
						<view class="title">訂單編號</view>
						<view class="text">GM1428114467699191391</view>
						<view class="copy" @tap="copyText">復製</view>
					</view>
					<view class="list">
						<view class="title">下單時間</view>
						<view class="text">2021-08-06 11:39:03</view>
					</view>
					<view class="list">
						<view class="title">付款時間</view>
						<view class="text">2021-08-06 14:30:00</view>
					</view>
					<view class="list">
						<view class="title">發貨時間</view>
						<view class="text">2021-08-07 09:20:00</view>
					</view>
					<view class="list">
						<view class="title">支付方式</view>
						<view class="text">YYDZ支付</view>
					</view>
					<view class="list">
						<view class="title">備註</view>
						<view class="text">無</view>
					</view>
				</view>
			</view>
		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				lang: 'en',
				link: '',
				pupu: false,
				scrrol: false,
				info: '',

			}
		},
		onLoad() {

		},
		onShow() {
			let that = this;
			//that.loadData();
		},
		methods: {
			setMenuLang() {
				let that = this;
				uni.setTabBarItem(this.Lang.lang('indexMenu')[0]);
				uni.setTabBarItem(this.Lang.lang('indexMenu')[1]);
				uni.setTabBarItem(this.Lang.lang('indexMenu')[2]);
				uni.setTabBarItem(this.Lang.lang('indexMenu')[3]);
			},
			// 复制文本到剪贴板
			copyText() {
				let that = this;
				uni.setClipboardData({
					data: that.link,
					success: function() {
						console.log('复制成功');
						// 可以添加用户友好的提示，例如使用uni.showToast提示复制成功
						uni.showToast({
							title: '复制成功',
							icon: 'none',
							duration: 2000
						});
					},
					fail: function() {
						console.error('复制失败');
						// 可以添加错误处理或用户友好的提示
					}
				});
			},
			loadData() {
				let that = this;
				that.Net._get('home', {}, res => {
					if (res.code == 200) {
						//console.log(res);

					}
				});
			},
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},
		},
		onPageScroll: function(Object) {
			//console.log(Object.scrollTop); //实时获取到滚动的值
			if (Object.scrollTop > 28) {
				this.scrrol = true;
				/* #ifdef APP-PLUS */
				/* #endif */
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
				/* #ifdef APP-PLUS */
				/* #endif */
			}
		},
	}
</script>

<style>
	.header {
		background-color: transparent !important;
	}

	.header .text {
		text-align: center;
	}

	.page_content {
		width: 92%;
		margin: 0 auto;
	}

	.scrrolHeader {
		width: 100%;
		background-color: #1A1A1A !important;

	}

	.content {
		width: 92%;
		position: absolute;
		top: calc(13.5vw + var(--status-bar-height));
		left: calc(50% - 46%);
	}

	.content .state_box {
		width: 96%;
		margin: 0 auto;
		display: flex;
		margin-top: 6vw;
		margin-bottom: 8vw;
	}

	.content .state_box .icon {
		font-size: 14vw;
		color: #fff;
		width: 18vw;
		text-align: right;
	}

	.content .state_box .text_box {
		flex: 1;
	}

	.content .state_box .text_box .title {
		font-size: 5vw;
		color: #fff;
	}

	.content .state_box .text_box .text {
		font-size: 3.5vw;
		color: #fff;
		margin-top: 2vw;
	}

	.content .address {
		width: 100%;
		background-color: #1A1A1A;
		padding: 5vw 4vw;
		border-radius: 4vw;
		display: flex;
		align-items: center;
		margin-top: 4vw;
	}

	.content .address .icon {
		width: 10vw;
		height: 10vw;
		border-radius: 50%;
		text-align: center;
		line-height: 10vw;
		color: #333;
		margin-right: 3vw;
		font-size: 5vw;
	}

	.icon_w {
		background-color: #2898f6;
	}

	.icon_d {
		background-color: #fff;
	}

	.content .address .text_box {
		flex: 1;
	}

	.content .address .text_box .title {
		font-size: 3.5vw;
		min-height: 10.5vw;
		color: #fff;
		line-height: 5vw;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.content .address .text_box .time {
		font-size: 3vw;
		color: #fff;
		margin-top: 2vw;
	}

	.content .address .text_box .name_box {
		display: flex;
	}

	.content .address .text_box .name_box .name {
		font-size: 3.5vw;
		color: #fff;
		line-height: 6vw;
	}

	.content .address .text_box .name_box .phone {
		font-size: 3vw;
		color: #fff;
		line-height: 6vw;
		margin-left: 1.5vw;
	}

	.content .address .text_box .text {
		color: #fff;
		font-size: 3.2vw;
		line-height: 5vw;
	}

	.content .address .arrow {
		width: 10.5vw;
		font-size: 3.5vw;
		color: #fff;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.content .address .menu {
		padding: 0 3vw;
		height: 6vw;
		line-height: 6vw;
		border-radius: 6vw;
		font-size: 3.2vw;
		color: #fff;
		background-color: #ff7f22;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.goods_content {
		width: 100%;
		margin: 0 auto;
		background: #1A1A1A;
		border-radius: 4vw;
		margin-top: 4%;
		padding: 5vw 4vw;
	}

	.goods_content .order_box {
		width: 100%;
		height: 8vw;
		display: flex;
	}

	.goods_content .order_box .shop {
		font-size: 3.5vw;
		color: #666;
		flex: 1;
		display: flex;
		margin-left: 3vw;
		line-height: 8vw;
	}

	.goods_content .order_box .shop .icon {
		font-size: 5vw;
		margin-right: 1.5vw;
		font-weight: 400;
	}

	.goods_content .order_box .state {
		font-size: 3.5vw;
		color: #ff5301;
		margin-right: 3vw;
		line-height: 8vw;
	}

	.goods_content .goods_box {
		width: 100%;
		display: flex;
	}

	.goods_content .goods_box .goods_img {
		width: 24vw;
		height: 24vw;
		border-radius: 2vw;
		margin-right: 3vw;
	}

	.goods_content .goods_box .text_box {
		flex: 1;
		margin-right: 3vw;
	}

	.goods_content .goods_box .text_box .title {
		font-size: 4vw;
		color: #fff;
		flex: 1;
		font-weight: bold;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.goods_content .goods_box .text_box .money_box {
		display: flex;
		margin-top: 4vw;
	}

	.goods_content .goods_box .text_box .money_box .money {
		font-size: 4vw;
		color: #fff;
		font-weight: bold;
		flex: 1;
	}

	.goods_content .goods_box .text_box .money_box .num {
		font-size: 3.5vw;
		color: #fff;
		flex: 1;
		text-align: right;
	}

	.goods_content .goods_box .text_box .actual_box {
		display: flex;
		justify-content: flex-end;
		margin-top: 1vw;
	}

	.goods_content .goods_box .text_box .actual_box .num {
		font-size: 3vw;
		color: #999;
		line-height: 6vw;
		margin-right: 2vw;
	}

	.goods_content .goods_box .text_box .actual_box .text {
		font-size: 3vw;
		color: #333;
		line-height: 6vw;
		margin-right: 1vw;
	}

	.goods_content .goods_box .text_box .actual_box .actual {
		font-size: 3.5vw;
		color: #fd3633;
		line-height: 6vw;
	}

	.goods_content .menu_box {
		width: 96%;
		margin: 0 auto;
		height: 13.5vw;
		display: flex;
		justify-content: flex-end;
		position: relative;
	}

	.goods_content .menu_box .menu {
		width: 24vw;
		height: 8vw;
		background-color: #ff7f22;
		box-sizing: border-box;
		margin-top: 3vw;
		margin-left: 2vw;
		border-radius: 1.5vw;
		line-height: 7.5vw;
		text-align: center;
		font-size: 3.5vw;
		color: #fff;
	}

	.goods_content .menu_box .menu02 {
		border: 1px solid #999 !important;
		color: #999 !important;
		background-color: transparent !important;
	}

	.content .menu_box .menu03 {
		position: absolute;
		left: 0.3vw;
		display: flex;
	}

	.goods_content .menu_box .menu03 .i {
		font-size: 6vw;
		color: #f72f4b;
		line-height: 13.5vw;
		margin-right: 1.5vw;
	}

	.goods_content .menu_box .menu03 .t {
		font-size: 3vw;
		color: #333;
		line-height: 13.5vw;
	}

	.goods_content .menu_box .reward {
		position: absolute;
		left: 1vw;
		top: 0;
		display: flex;
	}

	.goods_content .menu_box .reward .icon {
		width: 8vw;
		display: flex;
		align-items: center;
	}

	.goods_content .menu_box .reward .icon image {
		width: 100%;
	}

	.goods_content .menu_box .reward .text {
		font-size: 3vw;
		color: #999;
		line-height: 13.5vw;
		margin: 0 1vw 0 1.5vw;
	}

	.goods_content .menu_box .reward .money {
		font-size: 3vw;
		color: #ff5301;
		line-height: 13.5vw;
	}

	.list_box {
		width: 100%;
		margin: 4vw auto 0;
		background-color: #1A1A1A;
		border-radius: 4vw;
		padding: 2vw 4vw;
	}

	.list_box .list {
		width: 100%;
		margin: 0 auto;
		display: flex;
		align-items: center;
	}

	.list_box .list:nth-child(1) {
		border-bottom: 1px solid #f5f5f5;
	}

	.list_box .list .title {
		color: #fff;
		font-size: 3.2vw;
		line-height: 9vw;
		flex: 1;
	}

	.list_box .list:nth-child(1) .title {
		font-weight: bold;
		color: #3.5vw;
	}

	.list_box .list .text {
		color: #fff;
		font-size: 3.2vw;
		line-height: 9vw;
		flex: 1;
		text-align: right;
	}
	
	.list_box .list .copy{
		height: 6vw;
		border-radius: 6vw;
		line-height: 6vw;
		padding: 0 2vw;
		background-color: #0055FE;
		font-size: 3vw;
		margin-left: 2vw;
		color: #fff;
	}

	.contact_box {
		width: 100%;
		background-color: #e8e8e8;
		border-radius: 0 0 3vw 3vw;
		height: 12vw;
		line-height: 12vw;
		text-align: center;
		font-size: 3.5vw;
		color: #333;
		margin-bottom: 20vw;
	}

	.mask {
		width: 100%;
		height: 100vh;
		position: fixed;
		z-index: 90;
		top: 0;
		background: rgba(24, 24, 24, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.m_msgItem {
		width: 70%;
		padding: 40rpx;
		background: #ffffff;
		border-radius: 30rpx;
	}

	.call_img_box {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.call_img {
		width: 20vw;
		height: 22vw;
	}

	.call_tel {
		width: 100%;
		padding-top: 30rpx;
		font-size: 37rpx;
		font-weight: bold;
		color: #333333;
		text-align: center;
	}

	.call_msg {
		width: 100%;
		font-size: 26rpx;
		color: #a5a7ad;
		padding-top: 25rpx;
		padding-bottom: 20rpx;
		text-align: center;
	}

	.call_btn {
		width: 70%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		margin-left: 15%;
		font-size: 30rpx;
		border-radius: 39rpx;
		margin-top: 25rpx;
	}

	.call_btn1 {
		background: #ff7f22;
		color: #ffffff;
	}

	.call_btn2 {
		background: #ffffff;
		border: 1rpx solid #d3d3d3;
		color: #333333;
	}
</style>